<template>
    <div class="visit">
        <!--搜索框-->
        <div class="interview-header">
            <el-form ref="searchItem" :model="searchItem" :inline="true"  class="demo-form-inline">
                <el-form-item label="订单编号" class="search-item" prop="loanNo">
                    <el-input v-model="searchItem.loanNo" placeholder="订单编号"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号" class="search-item" prop="phone">
                    <el-input v-model="searchItem.phone" placeholder="用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="借款人" class="search-item" prop="realName">
                    <el-input v-model="searchItem.realName" placeholder="借款人"></el-input>
                </el-form-item>
                <el-form-item label="家访状态" prop="visitStatus">
                    <el-select  v-model.number="searchItem.visitStatus" placeholder="家访状态">
                        <el-option label="未家访" :value=0></el-option>
                        <el-option label="家访不通过" :value=1></el-option>
                        <el-option label="已通过" :value=2></el-option>
                        <el-option label="确认不通过" :value=3></el-option>
                        <el-option label="已确认" :value=4></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="fa-search" @click="loadData">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="fa-repeat" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--列表-->
        <div class="table-box">
            <el-table border :data="tableData" tooltip-effect="dark">
                <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
                <el-table-column prop="visitStatus" align="center" label="状态" width="120"></el-table-column>
                <el-table-column prop="createTime" align="center" label="申请时间" width="190"></el-table-column>
                <el-table-column prop="loanNo" align="center" label="订单编号" width="200">
                    <template scope="scope">
                        <router-link :to="{path: '/apply/borrowerDetails', query: {loanNo: scope.row.loanNo, userNo: scope.row.userNo}}" style="color: #20a0ff">{{scope.row.loanNo}}</router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="realName" align="center" label="借款人" width="110"></el-table-column>
                <el-table-column prop="idcard" align="center" label="身份证号码" width="200"></el-table-column>
                <el-table-column prop="phone" align="center" label="手机号" width="130"></el-table-column>
                <el-table-column prop="carType" align="center" label="车型"></el-table-column>
                <el-table-column prop="carRemark" align="center" label="说明" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="loanAmount" align="center" label="申请额度（元）" width="140"></el-table-column>
                <el-table-column prop="loanTime" align="center" label="申请期限" width="100"></el-table-column>
                <el-table-column prop="salesman" align="center" label="业务员" width="150"></el-table-column>
                <el-table-column prop="signTime" align="center" label="面签时间" width="190"></el-table-column>
                <el-table-column prop="signUser" align="center" label="面签人" width="150"></el-table-column>
                <el-table-column prop="signAmount" align="center" label="面签额度（元）" width="140"></el-table-column>
                <el-table-column prop="signLoanTime" align="center" label="借款期限" width="100"></el-table-column>
                <el-table-column prop="signInterestRate" align="center" label="利率（%）" width="140"></el-table-column>
                <el-table-column prop="signFee" align="center" label="综合服务费（元）" width="160"></el-table-column>
                <el-table-column prop="signRepayType" align="center" label="还款方式" width="100"></el-table-column>
                <el-table-column prop="signRemark" align="center" label="面签说明" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="风控初审时间" prop="riskTime" width="170"></el-table-column>
                <el-table-column align="center" label="风控初审人员" prop="riskUser" width="170"></el-table-column>
                <el-table-column align="center" label="风控初审额度（元）" prop="riskAmount" width="170"></el-table-column>
                <el-table-column align="center" label="风控初审借款期限" prop="riskLoanTime" width="170"></el-table-column>
                <el-table-column align="center" label="风控初审利率（%）" prop="riskInterestRate" width="170"></el-table-column>
                <el-table-column align="center" label="风控初审综合服务费（元）" prop="riskFee" width="240"></el-table-column>
                <el-table-column align="center" label="风控初审还款方式" prop="riskRepayType" width="160"></el-table-column>
                <el-table-column align="center" label="风控初审说明" prop="riskRemark" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="visitRemark" align="center" label="家访说明" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="visitUser" align="center" label="家访人员" width="150"></el-table-column>
                <el-table-column align="center" label="签署人员" prop="protocolUser" width="110"></el-table-column>
                <el-table-column align="center" label="协议签署" fixed="right" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.protocolStatus === 0">未签署</span>
                        <el-button size="small" type="primary" v-else-if="scope.row.protocolStatus === 1" @click="openProtocolsDialog(scope.row)">查看协议</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="家访图片" width="140" fixed="right">
                    <template scope="scope">
                        <span v-if="scope.row.visitStatus === '未家访'">无</span>
                        <el-button size="small" type="primary" v-else @click="openVisitPhoto(scope.row)">查看图片</el-button>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="操作" fixed="right" width="200">
                    <template scope="scope">
                        <el-button size="small" @click="returnLoan(scope.row)">退回</el-button>
                        <el-button size="small" type="primary" v-if="scope.row.visitStatus === '未家访'" @click="sureVisit(scope.row)">家访</el-button>
                        <el-button size="small" type="primary" v-else-if="scope.row.visitStatus === '家访不通过'" @click="openVisitPhoto(scope.row)">查看</el-button>
                        <el-button size="small" type="primary" v-else-if="scope.row.visitStatus === '已通过'" @click="openVisitSure(scope.row)">确认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="pageNum">
            <el-pagination
                @current-change ="handleCurrentChange"
                @size-change="handleSizeChange"
                :pageNum-sizes="pagesize"
                layout="prev, pager, next, total, sizes"
                :total="total">
            </el-pagination>
        </div>

        <!--家访-->
        <el-dialog title="家访" :visible.sync="dialogvisit" class="dialogvisit" :before-close="closeVisitDalog">
            <el-form label-width="80px" :rules="ruleVisit" :model="visitInfo" ref="ruleForm">
                <el-form-item label="是否通过" prop="visitInfoData.passStatus" required>
                    <el-radio-group v-model="visitInfo.visitInfoData.passStatus">
                        <el-radio :label=1>通过</el-radio>
                        <el-radio :label=0>不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="家访时间" prop="visitInfoData.visitTime" :rules="[{ type: 'date', required: true, message: '家访时间不能为空' }]">
                    <el-date-picker
                        v-model="visitInfo.visitInfoData.visitTime"
                        type="datetime"
                        placeholder=""
                        :default-value="visitInfo.visitInfoData.visitTime"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="家访人" prop="visitInfoData.visitUser" required>
                    <el-input :value="visitUserInfo" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="照片上传" prop="fileList">
                    <el-upload
                        class="upload-demo"
                        :action="actionUrl"
                        list-type="picture"
                        :on-success="handleSuccess"
                        :before-upload="beforeAvatarUpload"
                        :on-preview="handlePictureCardPreview"
                        :data="DataUploadInfo"
                        :file-list="visitInfo.fileList"
                        multiple
                        accept="image/*"
                        :on-remove="handleRemove">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="审核说明" prop="visitInfoData.visitRemark" :rules="[{ max: 2000, required: true, message: '审核说明在2000字以内', trigger: 'blur' }]">
                    <el-input type="textarea" v-model="visitInfo.visitInfoData.visitRemark" :rows="5" style="width: 308px;" resize="none"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitVisit()">确 定</el-button>
                <el-button @click="closeVisitDalog">取 消</el-button>
            </div>
        </el-dialog>

        <!--家访确认-->
        <el-dialog title="家访确认" :visible.sync="dialogVisitSure" class="dialogvisit" :before-close="closeVisitSure">
            <el-form label-width="80px" :rules="ruleVisit" :model="visitSureInfo" ref="ruleForm">
                <el-form-item label="是否通过" prop="passStatus" required>
                    <el-radio-group v-model="visitSureInfo.passStatus">
                        <el-radio :label=1>通过</el-radio>
                        <el-radio :label=0>不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="确认人员" prop="visitConfirmUser" required>
                    <el-input :value="visitUserInfo" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="审核说明" prop="visitConfirmRemark">
                    <el-input type="textarea" v-model="visitSureInfo.visitConfirmRemark" :rows="5" style="width: 308px;" resize="none"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitVisitSure()">确 定</el-button>
                <el-button @click="closeVisitSure">取 消</el-button>
            </div>
        </el-dialog>

        <!--查看协议-->
        <el-dialog title="协议" :visible.sync="protocolsDialog" class="Dialog">
            <el-carousel :autoplay="false" arrow="always" v-if="this.protocolsData.length>0" height="200px" indicator-position="outside" trigger="click">
                <el-carousel-item v-for="(item, index) in protocolsData" :key="index">
                    <img class="p-file" :src="item.protocolContent" alt="协议照片异常" @click="openBigPhoto(item.protocolContent)">
                </el-carousel-item>
            </el-carousel>
            <p v-else-if="this.protocolsData.length === 0" style="text-align: center;">暂无协议照片</p>
        </el-dialog>

        <!--家访照片-->
        <el-dialog title="家访照片" :visible.sync="visitPhotoDialog" class="Dialog">
            <el-carousel :autoplay="false" arrow="always" v-if="this.visitPhotoData.length>0" height="200px" indicator-position="outside" trigger="click">
                <el-carousel-item v-for="(item, index) in visitPhotoData" :key="index">
                    <img class="p-file" :src="item.url" alt="家访照片异常" @click="openBigPhoto(item.url)">
                </el-carousel-item>
            </el-carousel>
            <p v-else-if="this.visitPhotoData.length === 0" style="text-align: center;">暂无家访照片</p>
        </el-dialog>

        <!--图片预览-->
        <el-dialog v-model="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

        
 
        <!--大图片预览-->
        <el-dialog v-model="dialogBigPhoto" class="dialogBigPhoto" size="full">
            <img :src="BigPhotoUrl" alt="" id="rotateIMG">
        </el-dialog>

    </div>
</template>

<script>
    import { listLoanVisit, visitCheck, visitConfirm, keyHex, deleteLoanData, listLoanData, returnLoanCheck } from "@/api/api";
    import CryptoJS from 'crypto-js';
    export default {
        name: "visit",
        data () {
            return {
                total: 0,
                pagesize: ["10","30","50"],
                // 查询；
                searchItem: {
                    loanNo: "",
                    phone: "",
                    realName: "",
                    visitStatus: "",
                    pageNum: 1,

                    pageSize: 10
                },
                // 家访列表；
                tableData: [],
                // 家访弹出框显示；
                dialogvisit: false,
                // 家访；
                actionUrl: process.env.API_URL +'/zuul/api-loan/loan/upload/loanData',
                DataUploadInfo: {
                    platformNo: "",
                    loanNo: "",
                    dataType: 1
                },
                visitUserInfo: "",
                visitInfo: {
                    visitInfoData: {
                        loanNo: "",
                        passStatus: 1,
                        visitTime: new Date(),
                        visitUser: "",
                        visitRemark: ""
                    },
                    fileList: []
                },
                // 家访确认；
                dialogVisitSure: false,
                visitSureInfo: {
                    loanNo: "",
                    passStatus: 1,
                    visitConfirmUser: "",
                    visitConfirmRemark: ""
                },
                // 家访规则；
                ruleVisit: {
                    // 家访时间
                    visitTime: [
                        { type: 'date', required: true, message: '家访时间不能为空' }
                    ],
                    // 家访人
                    visitUser: [
                        { required: true, message: '家访人不能为空' }
                    ],
                    // 家访人
                    visitConfirmUser: [
                        { required: true, message: '家访人不能为空' }
                    ],
                    // 审核说明
                    visitRemark: [
                        { min: 1, required: true, message: '请填写审核说明', trigger: 'blur' },
                        { max: 2000, required: true, message: '审核说明在2000字以内', trigger: 'blur' }
                    ],
                    // 家访确认说明；
                    remark: [
                        { max: 2000, required: true, message: '审核说明在2000字以内', trigger: 'blur' }
                    ],
                    visitConfirmRemark: [
                        { max: 2000, required: true, message: '审核说明在2000字以内', trigger: 'blur' }
                    ]
                },
                CheckInfo: {
                    "loanNo": "",
                    "platformNo": "1",
                    "dataType": 1
                },
                // 查看协议；
                protocolsDialog: false,
                protocolsData: [],
                // 查看家访照片
                visitPhotoDialog: false,
                visitPhotoData: [],
                // 图片预览
                dialogVisible: false,
                dialogImageUrl: '',
                // 大图片预览
                dialogBigPhoto: false,
                BigPhotoUrl: ''
            };
        },
        watch: {
            $route (to) {
                if (to.name === "visit") {
                    this.loadData();
                    if (window.sessionStorage["sysUser"]) {
                        let userInfo = JSON.parse(window.sessionStorage.getItem("sysUser"));
                        this.DataUploadInfo.platformNo = userInfo ? userInfo.platformNo : '1';
                    }
                }
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                if (window.sessionStorage["sysUser"]) {
                    let userInfo = JSON.parse(window.sessionStorage.getItem("sysUser"));
                    this.DataUploadInfo.platformNo = userInfo?userInfo.platformNo:'1';
                    this.visitUserInfo = userInfo.name;
                    this.visitInfo.visitInfoData.visitUser = userInfo.userNo;
                    this.visitSureInfo.visitConfirmUser = userInfo.userNo;
                    this.CheckInfo.platformNo = userInfo.platformNo;
                };
                this.loadData();
            });
        },
        methods: {
            // 当前页码
            handleCurrentChange(val){
                this.searchItem.pageNum = val;
                this.loadData();
            },
            // 每页条数;
            handleSizeChange(val){
                this.searchItem.pageSize = val;
                this.loadData();
            },
            // 重置；
            resetForm () {
                this.$refs.searchItem.resetFields();
            },
            // 家访列表、查询
            async loadData () {
                let _this = this;
                await listLoanVisit(this.searchItem).then(function(res) {
                    let Data = JSON.parse(res.data.ciphertext);
                    if (Data) {
                        _this.tableData = Data.list;
                        console.log(_this.tableData);
                        _this.total = Data.total;
                        let arr = _this.tableData;
                        for (let i=0; i<arr.length; i++) {
                            let signStatusArr = ["未家访", "家访不通过", "已通过", "确认不通过", "已确认"];
                            let DateUnit = ["年", "月", "日"];
                            let signRepayType = ["到期还款", "先息后本", "等额本息", "等额本金"];
                            // 状态
                            arr[i].visitStatus = signStatusArr[arr[i].visitStatus];

                            // 申请时间
                            if (arr[i].createTime) {
                                arr[i].createTime = _this.formatTime(arr[i].createTime);
                            };

                            // 面签时间
                            if (arr[i].signTime) {
                                arr[i].signTime = _this.formatTime(arr[i].signTime);
                            };

                            // 申请期限
                            if (arr[i].loanTime) {
                                if(arr[i].loanUnit === "0" || arr[i].loanUnit === "1" || arr[i].loanUnit === "2"){
                                    arr[i].loanTime = arr[i].loanTime + DateUnit[arr[i].loanUnit];
                                } else {
                                    arr[i].loanTime = arr[i].loanTime + arr[i].loanUnit;
                                }
                            };

                            // 借款期限
                            if (arr[i].signLoanTime) {
                                if (DateUnit[arr[i].signLoanUnit]) {
                                    arr[i].signLoanTime = arr[i].signLoanTime + DateUnit[arr[i].signLoanUnit];
                                }
                            };

                            // 还款方式
                            arr[i].signRepayType = signRepayType[arr[i].signRepayType];

                            // 风控初审时间
                            if (arr[i].riskTime) {
                                arr[i].riskTime = _this.formatTime(arr[i].riskTime);
                            }

                            // 风控初审借款期限
                            if (arr[i].riskLoanTime) {
                                if (arr[i].riskLoanUnit) {
                                    arr[i].riskLoanTime = arr[i].riskLoanTime + DateUnit[arr[i].riskLoanUnit];
                                }
                            }

                            // 风控初审还款方式
                            arr[i].riskRepayType = signRepayType[arr[i].riskRepayType];
                        };
                    }
                });
            },
            // 上传文件之前
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isPNG) {
                    this.$message.error('只能上传 jpg / png 文件');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return (isJPG || isPNG) && isLt2M;
            },
            // 上传成功
            handleSuccess (response, file, fileList) {
                this.visitInfo.fileList = fileList;
                console.log("this.fileList", this.fileList);
                let ciphertext = CryptoJS.TripleDES.decrypt(response.ciphertext, keyHex, {
                    iv: CryptoJS.enc.Utf8.parse(keyHex),
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7
                });
                ciphertext = CryptoJS.enc.Utf8.stringify(ciphertext);
                response.ciphertext = JSON.parse(ciphertext);
                file.dataNo = response.ciphertext.dataNo;
                // console.log("response", response);
                console.log("fileList", file.response.ciphertext.dataNo);
            },
            // 删除图片
            handleRemove (file) {
                console.log(file);
                deleteLoanData({
                    "platformNo": this.DataUploadInfo.platformNo,
                    "loanNo": this.DataUploadInfo.loanNo,
                    "dataNo": file.dataNo
                }).then((res) => {
                    console.log(res);
                });
            },
            // 图片预览
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 打开家访弹窗；
            sureVisit (rows) {
                this.visitInfo.visitInfoData.loanNo = rows.loanNo;
                this.CheckInfo.loanNo = rows.loanNo;
                this.DataUploadInfo.loanNo= rows.loanNo;
                this.dialogvisit = true;
                let _this = this;
                listLoanData({
                    "loanNo": rows.loanNo,
                    "dataType": 1
                }).then((res) => {
                    if (res.data.state.code === "200") {
                        let Data = JSON.parse(res.data.ciphertext);
                        _this.visitInfo.fileList = Data;
                        console.log(Data);
                    }
                });
            },
            // 关闭家访弹窗；
            closeVisitDalog () {
                this.dialogvisit = false;
                this.visitInfo.visitInfoData.visitTime = new Date();
                this.visitInfo.visitInfoData.visitUser = "";
                this.visitInfo.visitInfoData.visitRemark = "";
                this.$refs.ruleForm.resetFields();
            },
            // 家访
            submitVisit () {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.postVisitInfo();
                    } else {
                        return false;
                    }
                });
            },
            async postVisitInfo () {
                let _this = this;
                await visitCheck(this.visitInfo.visitInfoData).then(function(res) {
                    if (res.data.state.code === "200") {
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                        _this.dialogvisit = false;
                        _this.loadData();
                        _this.closeVisitDalog();
                    } else {
                        _this.$message({
                            message: res.data.state.message,
                            type: 'error'
                        });
                    }
                });
            },
            // 打开确认家访弹窗；
            openVisitSure (rows) {
                console.log(rows.loanNo);
                this.visitSureInfo.loanNo = rows.loanNo;
                this.dialogVisitSure = true;
            },
            // 关闭确认家访弹窗；
            closeVisitSure () {
                this.dialogVisitSure = false;
                this.visitInfo.visitInfoData.remark = "";
                this.$refs.ruleForm.resetFields();
            },
            // 确认家访
            submitVisitSure () {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.postVisitSure();
                    } else {
                        return false;
                    }
                });
            },
            async postVisitSure () {
                let _this = this;
                await visitConfirm(this.visitSureInfo).then(function(res) {
                    if (res.data.state.code === "200") {
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                        _this.dialogvisit = false;
                        _this.loadData();
                        _this.closeVisitSure();
                    } else {
                        _this.$message({
                            message: res.data.state.message,
                            type: 'error'
                        });
                    }
                });
            },
            // 查看家访照片：
            openVisitPhoto (rows) {
                this.visitPhotoDialog = true;
                if (rows.data) {
                    this.visitPhotoData = rows.data;
                }
            },
            // 查看协议：
            openProtocolsDialog (rows) {
                this.protocolsDialog = true;
                this.protocolsData = rows.protocols;
            },
            // 退回
            returnLoan (row) {
                let _this = this;
                this.$confirm('是否退回?', '提示', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    type: 'warning'
                }).then(() => {
                    returnLoanCheck({
                        "loanNo": row.loanNo
                    }).then((res) => {
                        if (res.data.state.code === "200") {
                            _this.$message({
                                message: "成功",
                                type: 'success'
                            });
                            _this.loadData();
                        } else {
                            _this.$message(res.data.state.message);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            // 大图片预览
            openBigPhoto (item) {
                this.dialogBigPhoto = true;
                this.BigPhotoUrl = item;
            }
        }
    };
</script>

<style lang="scss">
  .visit{
      /*搜索框*/
      .interview-header{
          border: 1px solid #eee;
          margin:20px;
          padding:22px 0 0 20px;
          min-width: 1200px;
          box-sizing: border-box;
          .search-in{
              .search-item{
                  margin-right: 30px;
              }
          }
      }
      /*列表*/
      .table-box{
          border: 1px solid #eee;
          margin:20px;
          min-width: 1200px;
      }
      /*分页*/
      .pageNum{
          text-align: right;
          padding:0 10px;
          .el-pagination{
              padding: 0;
          }
      }
      .dialogvisit{
          .el-form {
              width: 390px;
              margin-left:50px;
              .el-input {
                  width: 308px;
              }
              .file_btn{
                  width:200px;
                  text-align: center;
                  position: relative;
                  .file-input{
                      opacity: 0;
                      width: 100%;
                      height: 100%;
                      position: absolute;
                      left:0;
                      top:0;
                  }
              }
              .upload_warp_img{
                  margin-top:22px;
                  .upload_warp_img_div{
                      width: 146px;
                      height: 146px;
                      border: 1px dashed #d9d9d9;
                      border-radius: 6px;
                      display: inline-block;
                      margin-right:15px;
                      margin-bottom: 15px;
                      position: relative;
                      img{
                          width: 146px;
                          height: 146px;
                          position: absolute;
                          left: 0;
                          top:0;
                      }
                      .close{
                          width: 5px;
                          height: 5px;
                          position: absolute;
                          right: 4px;
                          top: -10px;
                          font-size: 18px;
                          color: #ccc;
                          cursor: pointer;
                      }
                      .close:hover{
                          color: #20a0ff;
                      }
                  }
              }
          }
      }
      .Dialog{
          img{
                max-width: 100%;
                max-height: 100%;
                display: block;
                margin: 0 auto;
                text-align: center;
          }
      }
      .dialogBigPhoto{
          img{
                max-width: 100%;
                max-height: 100%;
                display: block;
                margin: 0 auto;
                text-align: center;
          }
      }
  }
</style>
